<template>
  <div class="body">
    <div ref="bigbox" class="bigbox">
      <div class="top" v-if="JSON.stringify(content) != '{}'">
        <h1 class="ellipsis">{{ content.name }}</h1>
        <h2>
          {{ content.intro }}
        </h2>
        <h4 @click="shareClick()">分享</h4>
        <ul>
          <li>
            <h3>{{ content.total_num }}<span>个</span></h3>
            <p>任务剩余数量</p>
          </li>
          <li style="margin: 0 0.27rem">
            <h3>￥{{ content.price | money }}</h3>
            <p>任务价格</p>
          </li>
          <li>
            <h3>￥{{ content.vip_price | money }}</h3>
            <p>任务会员价格</p>
          </li>
        </ul>
      </div>

      <div class="detila" ref="detila">
        <h1>任务描述</h1>
        <dl v-for="(item, index) in task" :key="index">
          <dd>
            <div
              style="min-height:1rem;"
              :style="{ 'margin-top': index === 0 ? '0.36rem' : '0' }"
            ></div>
            <img
              :src="
                require('../../assets/img/rwxx_img_0' + (index + 1) + '.png')
              "
              alt=""
            />
          </dd>
          <dt>
            <div>
              <h2>
                第{{ (index + 1) | toChnum }}步：<span>{{
                  item.step_name
                }}</span>
              </h2>
              <p>{{ item.step_desc }}</p>
              <img
                :src="item.thumb"
                alt=""
                @error="errorImage($event)"
                @load="loadImage"
                preview="index"
              />
              <h3>步骤{{ (index + 1) | toChnum }}</h3>
            </div>
          </dt>
        </dl>
        <h6></h6>
      </div>

      <div class="btn">
        <transition
          name="slide-fade1"
          enter-active-class="fadeInUp"
          leave-active-class="fadeOutDown"
        >
          <div class="btnclass1" v-if="btnkey">
            <ul>
              <li @click="changemiss()">
                <img src="../../assets/img/huanyihua1n.png" alt="" />
                <span>换一换</span>
              </li>
              <li @click="checkstate()">
                <img src="../../assets/img/renwu1.png" alt="" />
                <span>领取任务</span>
              </li>
            </ul>
          </div>
        </transition>
      </div>

      <div class="shadow" v-if="shadow"></div>

      <!--        <div class="btmBox"></div>-->
    </div>
  </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast, Indicator } from 'mint-ui';

export default {
  name: '',
  data() {
    return {
      content: {},
      task: [],
      task_id: '',
      recode: '',
      imgTotal: 0,
      imgNum: 0,
      shadow: true,
      btnkey: true,
      historyTop: 0,
      timeOut: null,
      activity_id: '',
      users_activity_id: '',
      user_id: '',
    };
  },
  computed: {},
  mounted() {
    this.$nextTick(() => {
      this.task_id = this.$route.query.id;
      this.recode = this.$route.query.recode;
      this.getindextasx();
    });

    Indicator.open({
      text: '加载中...',
      spinnerType: 'double-bounce',
    });
    window.addEventListener('scroll', this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      // let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
      this.btnkey = false;
      clearTimeout(this.timeOut);
      this.btnkey = false;
      this.timeOut = setTimeout(() => {
        this.btnkey = true;
      }, 100);
    },
    errorImage(e) {
      e.target.src = require('../../assets/img/error.png');
      this.imgNum++;
      if (this.task.length >= this.imgNum - 1) {
        setTimeout(() => {
          this.setheight();
          Indicator.close();
          this.shadow = false;
        }, 300);
      }
    },
    loadImage() {
      this.imgNum++;
      if (this.task.length >= this.imgNum - 1) {
        setTimeout(() => {
          this.setheight();
          Indicator.close();
          this.shadow = false;
          //图片放大刷新
          this.$previewRefresh();
        }, 300);
      }
    },
    shareClick() {
      let userinfo = localStorage.getItem('userinfo');
      if (!userinfo) {
        this.$router.push({ path: '/login', query: { recode: this.recode } });
        return;
      }
      this.$router.push({
        path: '/share',
        query: { task_id: this.task_id, user_id: JSON.parse(userinfo).user_id },
      });
    },
    errorimg() {
      return require('../../assets/img/error.png');
    },
    //获取任务
    getindextasx() {
      axiosPost(
        'index/task_info',
        {
          task_id: this.task_id,
        },
        (res) => {
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          this.content = res.data.content;
          this.activity_id = res.data.content.activity_id;
          this.users_activity_id = res.data.content.users_activity_id;
          this.task = res.data.task;
          if (this.task.length == 0) {
            Indicator.close();
            Toast({
              message: '当前任务配置出错，请联系管理员',
              duration: 2000,
            });
            setTimeout(() => {
              this.shadow = false;
              this.$router.go(-1);
            }, 2000);
          }
        }
      );
    },
    //设置高度
    setheight() {
      let detialbox = this.$refs.detila;
      this.$nextTick(() => {
        for (let index in detialbox.children) {
          let item = detialbox.children[index];
          if (item.tagName === 'DL') {
            if (index == 1) {
              item.children[0].children[0].style.height =
                item.children[1].offsetHeight + 20 - 0.36 * this.rem() + 'px';
            } else {
              item.children[0].children[0].style.height =
                item.children[1].offsetHeight + 20 + 'px';
            }
          }
        }
      });
    },
    //更换任务
    changemiss() {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'double-bounce',
      });
      this.imgNum = 0;
      this.shadow = true;
      axiosPost(
        'index/replace_task_info',
        {
          task_id: this.task_id,
        },
        (res) => {
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          this.content = res.data.content;
          this.activity_id = res.data.content.activity_id;
          this.users_activity_id = res.data.content.users_activity_id;
          this.task = res.data.task;
          if (this.task.length == 0) {
            Indicator.close();
            Toast({
              message: '当前任务配置出错，请联系管理员',
              duration: 2000,
            });
            setTimeout(() => {
              this.shadow = false;
              this.$router.go(-1);
            }, 2000);
          }
          this.task_id = res.data.content.task_id;
          this.imgNum = 0;
        }
      );
    },
    //判断任务状态
    checkstate() {
      if (!this.iflogin()) {
        Toast({
          message: '登录过期，请重新登录',
          duration: 1000,
        });
        setTimeout(() => {
          this.$router.push({ path: '/login', query: { recode: this.recode } });
        }, 1500);
        return;
      }
      axiosPost(
        'task/receive_task_info',
        {
          task_id: this.task_id,
        },
        (res) => {
          //console.log(res)
          if (res.code == -1) {
            Toast({
              message: res.msg,
              duration: 1000,
            });
            setTimeout(() => {
              this.$router.push({ path: '/mission' });
            }, 1000);
            return;
          }
          if (res.code == -3) {
            Toast({
              message: res.msg,
              duration: 1500,
            });
            setTimeout(() => {
              this.$router.push('/member');
            }, 1500);
          }
          if (res.code !== 1) {
            return Toast({
              message: res.msg,
              duration: 1000,
            });
          }
          this.getmission();
        }
      );
    },
    //领取任务
    getmission() {
      axiosPost(
        'task/receive_task',
        {
          task_id: this.task_id,
          activity_id: this.activity_id,
          users_activity_id: this.users_activity_id,
        },
        (res) => {
          if (res.code !== 1) {
            Toast({
              message: res.msg,
              duration: 1000,
            });
            return;
          }
          Toast({
            message: '任务领取成功',
            duration: 1000,
          });
          this.$router.push({
            path: '/steps',
            query: { task_id: res.data.user_task_id, state: 0 },
          });
        }
      );
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll, true);
  },
};
</script>

<style scoped lang="less">
@import '../../style/default';

.body {
  background: #f9f9f9;
  overflow: scroll;
  .bigbox {
    overflow: hidden;
  }
}

.top {
  height: auto;
  background: url('../../assets/img/rwxx_img_bj.png') center -1.3rem no-repeat;
  background-size: 7.5rem auto;
  overflow: hidden;
  position: relative;

  h1 {
    font-size: 0.38rem;
    font-weight: bold;
    color: @color4;
    margin-top: 0.4rem;
    padding: 0 0.4rem;
    max-width: 5rem;
  }

  h2 {
    font-size: 0.28rem;
    font-weight: 400;
    color: #ffffff;
    margin-top: 0.2rem;
    padding: 0 0.4rem;
  }

  h4 {
    border-radius: 0.3rem;
    background: rgba(255, 149, 45, 0.6) url('../../assets/img/fenxiang1.png')
      0.25rem center no-repeat;
    background-size: 0.29rem auto;
    color: @color4;
    font-weight: normal;
    font-size: 0.3rem;
    position: absolute;
    top: 0.4rem;
    right: 0.3rem;
    text-align: center;
    padding: 0.1rem 0.25rem 0.1rem 0.6rem;
  }

  ul {
    overflow: hidden;
    margin-top: 0.4rem;
    padding: 0 0.3rem;
    height: 1.53rem;

    li {
      float: left;
      width: 2.12rem;
      height: 1.53rem;
      background: @color4;
      box-shadow: 0 0 0.1rem rgba(240, 240, 240, 1);
      border-radius: 0.06rem;

      h3 {
        font-size: 0.44rem;
        font-weight: bold;
        color: @color3;
        text-align: center;
        margin-top: 0.3rem;
        padding: 0;

        span {
          font-size: 0.3rem;
          font-weight: 400;
        }
      }

      p {
        font-size: @font24;
        font-weight: 400;
        color: rgba(155, 155, 155, 1);
        text-align: center;
        margin-top: 0;
      }
    }
  }
}

.detila {
  padding: 0 0.4rem;
  overflow: hidden;
  margin-top: 0.25rem;
  position: relative;

  h1 {
    font-size: @font28;
    font-weight: bold;
    color: @color3;
    margin-bottom: 0.3rem;
  }

  h6 {
    position: absolute;
    bottom: 0;
    left: 0.65rem;
    width: 0.1rem;
    height: 0.1rem;
    border-radius: 0.05rem;
    background: #ff462d;
  }

  dl {
    overflow: hidden;

    dd {
      float: left;
      width: 0.8rem;
      position: relative;
      overflow: hidden;

      span {
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 0.05rem;
        background: @color1;
        position: absolute;
        bottom: 0;
        right: 0.44rem;
      }

      div {
        width: 0.3rem;
        border-right: 1px dashed @color1;
      }

      img {
        width: 0.36rem;
        position: absolute;
        right: 0.33rem;
        top: 0.36rem;
      }
    }

    dt {
      float: left;
      width: calc(100% - 0.8rem);

      div {
        background: @color4;
        /*height:7rem;*/
        border-radius: 0.06rem;
        padding: 0.4rem;

        h2 {
          font-size: 0.3rem;
          font-weight: bold;
          color: @color3;

          span {
            font-weight: normal;
          }
        }

        p {
          font-size: @font28;
          font-weight: 400;
          color: @color2;
          margin: 0.3rem 0;
        }

        img {
          display: block;
          margin: 0 auto;
          max-width: 100%;
        }

        h3 {
          font-size: @font28;
          font-weight: 400;
          color: @color2;
          text-align: center;
          margin-top: 0.1rem;
          padding-bottom: 0.1rem;
        }
      }
    }
  }
}

.btn {
  height: 1rem;
  margin: 0.3rem auto 0.2rem;

  .fadeInUp,
  .fadeOutUp,
  .fadeUp-enter-active,
  .fadeUp-leave-active {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all 0.8s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-to
            /* .slide-fade-leave-active for <2.1.8 */ {
    transform: translateX(0);
    opacity: 0;
  }

  .btnclass1 {
    position: fixed;
    left: 0;
    bottom: 0.1rem;
  }
  div {
    width: 100%;
    height: 1.2rem;
    background: #ffffff;
    ul {
      height: 1rem;
      width: 6.8rem;
      margin: 0.1rem auto;

      li {
        font-size: @font32;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        padding: 0.29rem 0;
        float: left;
        img {
          height: 0.32rem;
          margin-right: 0.12rem;
        }
      }

      li:nth-child(1) {
        width: 3.2rem;
        background: url('../../assets/img/rwxx_img_an_left.png') center center
          no-repeat;
        background-size: 3.2rem 1rem;
      }

      li:nth-child(2) {
        background: url('../../assets/img/rwxx_img_an_right.png') center center
          no-repeat;
        background-size: 3.6rem 1rem;
        width: 3.6rem;
      }
    }
  }
}

.shadow {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}
</style>
